<template>
  <div>
    <div id="box">
      <div class="login-logo">
        <img src="../assets/header-logo.png" alt="" />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="userphone"
          label="手机号"
          nname="手机号"
          placeholder="请输入手机号"
          required
          :rules="[
            { required: true },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对' },
          ]"
        />
        <van-field
          required
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[
            { required: true },
            {
              pattern: /^[a-zA-Z]\w{5,17}$/,
              message: '密码不正确',
            },
          ]"
        />
        <div style="margin: 18vw 0 2vw">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <router-link class="ftpwd" style="margin: 7vw 0 0 2vw" to="/Ftpwd"
        >忘记密码 ?</router-link
      >
      <div class="register">
        <span>还没有账号 ? </span>
        <router-link class="reg" to="/Register">快速注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userphone: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      let params = {
        userphone: this.userphone,
        password: this.password,
      };

      var url = "/sys/userDo/login";
      this.axios
        .post(url, params, { "Content-Type": "application/json" })
        .then((res) => {
          console.log("登录业务", res);
          if (res.data.code == 2000) {
            // console.log('accesstoken:',res.headers.accesstoken);
            this.$store.state.accesstoken = res.headers.accesstoken;
            this.$store.state.id = res.data.data.id;
            this.$store.state.avatarUrl = res.data.data.avatarUrl;
            this.$store.state.createTime = res.data.data.createTime;
            this.$store.state.email = res.data.data.email;
            this.$store.state.sex = res.data.data.sex;
            this.$store.state.username = res.data.data.username;
            this.$store.state.userphone = res.data.data.userphone;
            console.log(this.$store.state);
            this.$messagebox("提示", "登录成功");
            this.$router.push("/index");
          } else {
            this.$messagebox("提示", "手机号、密码有误或存在，请重新输入");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  width: 100vw;
  margin: 16vw auto;
  position: relative;
  .login-logo {
    width: 100%;
    position: absolute;
    margin: 10vw auto;
    text-align: center;
  }
  .van-form {
    position: absolute;
    width: 80%;
    margin: 88vw 10vw;
    .van-button {
      position: absolute;
      top: 46vw;
      background-color: rgb(252, 148, 30);
      border: 0;
    }
  }
  .ftpwd {
    position: absolute;
    top: 120vw;
    right: 12vw;
    font-size: 0.8em;
    color: #aaa;
  }
  .register {
    position: absolute;
    top: 148vw;
    right: 12vw;
    font-size: 0.6em;
    .reg {
      color: #fd6912;
    }
  }
}
</style>
